<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 从出生到死亡
    beforeCreate
    
    
    -->
    <div id="app">
        <h1 ref="testmsgupdate">{{msg}}</h1>
        <div ref="divTest">test 操作DOM</div>
        <button @click="btn">方法</button>
        <button @click="del">销毁</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'声明周期'
            },
            methods: {
                btn(){
                    console.log('测试方法哪个时刻加载完成');
                    this.msg = '改变msg的值'
                },
                del(){
                    this.$destroy();
                }
            },
            // vue实例创建  data 数据   methods   什么时刻能去操作DOM
            beforeCreate() {
                console.log('beforecreate')
                console.log(this.msg);
                console.log(this.btn);
                console.log(this.$refs.divTest);
            },
            // created 数据、方法、计算、监听器初始化完成，不能操作DOM
            // 发送ajax请求 前后交互在created
            created() {
                console.log('created');
                console.log(this.msg);
                console.log(this.btn);
                console.log(this.$refs.divTest);
            },
            // 不能操作DOM
            beforeMount() {
                console.log('beforeMount  挂载前');
                console.log(this.msg);
                console.log(this.btn);
                console.log(this.$refs.divTest);
            },
            // 挂载完成  el被新创建的vm.$el替换 可以操作DOM 挂载只会挂载一次
            //  // 发送ajax请求 前后交互在mounted  
            mounted() {
                console.log('mounted 挂载');
                console.log(this.msg);
                console.log(this.btn);
                console.log(this.$refs.divTest);
            },
            // 当页面更改时，则会触发beforeUpdate 和updated
            beforeUpdate() {
                console.log('beforeUpdate  更改');
                console.log(this.$refs.testmsgupdate);
                // debugger
                // beforeUpdate时还是旧值
            },
            updated() {
                // updated之后就是新值
                console.log('updated  更改后');
                console.log(this.$refs.testmsgupdate);

            },
            //销毁的时候就会触发这两个声明周期
            beforeDestroy() {
                console.log('销毁前');
                // 一般会做一些收尾工作   清除定时器   移除一些事件
            },
            destroyed() {
                console.log('销毁！！');
            },
        })
    </script>
</body>
</html>